<template>
  <div style="position: relative">
    <!-- 文章内容 -->
    <div style="margin: 10px auto; padding: 5px 10px; display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-between; flex-grow: 1; flex-shrink: 1;" >
      <v-hover style="padding: 5px 15px; margin: 15px auto" v-for="item in articles" :key="item.articleId" v-slot:default="{hover}" :class="'my-home-article-'+widthLevel">
        <v-card :to="'/article/'+item.articleId" :elevation="hover?6:widthLevel>1?0:4" >
          <!-- 文章标题 -->
          <div style="display: flex; justify-content: space-between;margin-bottom: 10px">
            <div class="text-body-1 text-sm-h6  text-md-h5 font-weight-bold my-article-title">{{item.title}}</div>
            <v-card style="height: 32px; line-height: 32px; padding: 0 5px; color: white" :style="{'background-color':classColor[item.classId-1]}">{{item.className}}</v-card>
          </div>

          <!-- 基础信息 -->
          <div style="padding: 2px 5px; font-size: 14px;display: flex; justify-content: start; text-align: center">
            <div @click.stop.prevent="$router.push('/information')" style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-account</v-icon>虚光</div>
            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-eye</v-icon>{{item.pageView}}</div>
            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-thumb-up</v-icon>{{item.thumbNumber}}</div>
          </div>

          <!-- 文章简介 -->
          <div style="padding: 2px 5px 0; text-align: left; margin-top: 10px">
            <p class="text-lg-subtitle-1 my-article-description">
              {{item.description}}
            </p>
          </div>

          <!-- 文章标签 -->
          <div style="padding: 0 5px; display: flex; justify-content: space-between; font-size: 12px">
            <div class="my-article-title">
              <v-icon @click.stop.prevent="$router.push('/tag')">mdi-tag</v-icon>
              <v-hover v-for="tag in item.tags" :key="tag.tagId" v-slot:default="{hover}">
                <div @click.stop.prevent="$router.push('/tag/'+tag.tagId)" :class="hover?'blue--text':''" :key = "item.tagId" style="display: inline-block; padding: 2px 0; margin-right: 10px; text-decoration: underline">{{tag.tagName}}</div>
              </v-hover>
            </div>

            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-calendar-blank-multiple</v-icon>{{item.time}}</div>
          </div>
        </v-card>
      </v-hover>
    </div>

    <!-- 分页 -->
    <div class="text-center">
      <v-pagination @input="getArticles()" v-model="pageInformation.pageNumber" :length="pageInformation.pageTotal" ></v-pagination>
    </div>
  </div>
</template>

<script>
import Http from "@/api/http";

export default {
  name: "Home",


  data: ()=>{
    return {
      // 分页信息
      pageInformation: {
        pageNumber: 1,
        pageTotal: 15
      },

      classColor: [
          '#0b9c2f',
          '#d71515',
          '#2ab9d4',
          '#c9a034',
          '#afadad'
      ],

      searchContent: "",
      // 文章内容
      articles: []
    }
  },


  props: {
    widthLevel: Number
  },


  methods: {

    /*  用于获取分页信息  */
    getArticles(){
      if(this.searchContent != ""){
        this.search(this.searchContent, 0)
      }else {
        this.$emit("childloading", true);

        Http.get("/article/home/articles", {
          params: {
            "pageNumber": this.pageInformation.pageNumber,
            "pageTotal": 12
          }
        }).then(data=>{
          if(data.code == 1){
            this.pageInformation.pageTotal = data.result.totalPageNumber;
            this.articles = data.result.articles;
            this.$emit("childloading", false);
          }else{
            this.$emit("updateError",data.message);
            this.$emit("childloading", false);
          }
        }).catch(fail=>{
          this.$emit("updateError","服务端发生错误");
          console.error(fail);
          this.$emit("childloading", false);
        })
      }
    },

    /*  进行搜索  */
    search(searchContent, pageNumber){
      this.searchContent = searchContent;
      if(pageNumber == 1){
        this.pageInformation.pageNumber = 1;
      }

      this.$emit("childloading", false);
      Http.get("/article/search", {
        params: {
          "pageNumber": this.pageInformation.pageNumber,
          "pageTotal": 12,
          "searchContent": searchContent
        }
      }).then(data=>{
        if(data.code == 1){
          this.pageInformation.pageTotal = data.result.totalPageNumber;
          this.articles = data.result.articles;
          this.$emit("childloading", false);
        }else{
          this.$emit("updateError",data.message);
          this.$emit("childloading", false);
        }
      }).catch(fail=>{
        this.$emit("updateError","服务端发生错误");
        console.error(fail);
        this.$emit("childloading", false);
      })
    },

  },


  watch: {
    /* 回到首页 */
    'pageInformation.pageNumber'(){
      const myTimer = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(myTimer)
        }
      })
    }
  },


  created() {
    this.$emit("childloading",true);

    Http.get("/article/home/articles", {
      params: {
        "pageNumber": this.pageInformation.pageNumber,
        "pageTotal": 12
      }
    }).then(data=>{
      if(data.code == 1){
        this.pageInformation.pageTotal = data.result.totalPageNumber;
        this.articles = data.result.articles;
        this.$emit("childloading", false);
      }else{
        this.$emit("updateError",data.message);
        this.$emit("childloading", false);
      }
    }).catch(fail=>{
      this.$emit("updateError","服务端发生错误");
      console.error(fail);
      this.$emit("childloading", false);
    })

  }
}
</script>

<style scoped>
  .my-home-article-1 {
    padding: 10px 7px;
    margin: 10px auto 0;
    width: 90%
  }
  .my-home-article-2 {
    padding: 15px 12px;
    margin: 15px 5px 0;
    flex-basis: 80%;
  }
  .my-home-article-3 {
    padding: 18px 14px;
    margin: 15px 5px 0;
    flex-basis: 42%;
  }

  .my-article-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .my-article-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 60%;
  }
</style>